<template>
<!-- 跨账号 广告组组件 -->
  <div>
    <div class="nav">
      <!-- 选择账号下广告组 -->
      <div class="account">
        <a-list item-layout="horizontal" :data-source="selectedAccount">
          <a-list-item slot="renderItem" slot-scope="item" @click="clickAccount(item)">
            {{ item.name }}
          </a-list-item>
        </a-list>
      </div>
      
      <div class="campaign">
        <a-table
          size="small"
          :row-selection="{ selectedRowKeys:selectedCampaign,onSelect:onSelect,columnTitle:' ' }"
          :columns="columns"
          rowKey='id'
          :data-source="campaignData"
        />
      </div>
      <div class="select">
        <div v-for="(item,index) in campaignSelectAll" :key="index">
          <a-tag closable>{{ item.name }}</a-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCampaignListGet } from "@/api/adv/campaign";

export default {
  props:{
    selectedAccount:{
      type:Array,
      default:()=>{ return [] }
    },
    landingType:{
      type:String,
      default:'APP'
    },
    selectedCampaigns:{  // 已选广告组 [id]
      type:Array,
      default:()=>{ return [] }
    },
    selectedCampaignsObj:{  // 已选广告组 [{}]
      type:Array,
      default:()=>{ return [] }
    },
    doubelRowKeys:{   // 已选 跨账号 [id]
      type:Array,
      default:()=>{ return [] }
    }
  },
  data(){
    return {
      columns:[{ title: '广告组', dataIndex: 'name' }],
      campaignData:[],  // 当前账号广告组数据

      selectedCampaign:this.selectedCampaigns,  // 所有账号当前已选广告组id []
      campaignSelectAll:this.selectedCampaignsObj,  // 所有已选广告组 [{}]
      nowAccountId:'',  // 当前选择的账户
    }
  },
  watch:{
    'campaignSelectAll':function(params) {
      this.$emit('update:selectedCampaignsObj',params)
    },
    'doubelRowKeys': {
      deep:true,
      handler(newAccount){
        if( newAccount.length === 0 ) this.campaignData = []
        let newSelectAll = []
        for (const campaigns of this.campaignSelectAll) {
          if ( newAccount.indexOf(campaigns.account_id) !== -1 ) newSelectAll.push(campaigns)
          else this.selectedCampaign.splice(this.selectedCampaign.indexOf(campaigns.id),1)
        }
        this.campaignSelectAll = newSelectAll
      }
    },
    'landingType': {
      deep:true,
      handler(newlandingType){
        console.info(newlandingType,'广告组类型变化')
        this.campaignData = []
        this.selectedCampaign = []
        this.campaignSelectAll = []
        // this.closeData()  // 广告组类型改变，清空(除账号外)所有已选的数据
        this.getCampaign()
      }
    },
  },
  methods:{
    // 获取广告组
    getCampaign(){
      if(this.nowAccountId && this.landingType){
        let quert = { account_id:this.nowAccountId,landing_type:this.landingType,status:'CAMPAIGN_STATUS_ENABLE' }
        getCampaignListGet(quert).then((res)=>{
          this.campaignData = res.data
        })
      }
    },
    // 点击账号 获取账号下广告组
    clickAccount(item){
      if( this.nowAccountId === item.account_id && this.campaignData.length !== 0 ) return
      this.nowAccountId = item.account_id
      this.getCampaign()
    },
    // 选择广告组 checked:是否选中
    onSelect(item,checked){
      if(checked){
        this.selectedCampaign.push(item.id)
        this.campaignSelectAll.push(item)
      }else {
        this.selectedCampaign.splice(this.selectedCampaign.indexOf(item.id),1)
        this.campaignSelectAll.splice(this.campaignSelectAll.indexOf(item),1)
      }
    }
  }
}
</script>

<style lang="less" scoped>
  @bd_color:#C9C9CA;
  .bd_collaps{
    border-collapse:collapse;
  }
  .w_h( @width:100%, @height:100% ){
    width: @width;
    height: @height;
    overflow-y: auto;
  }
  .ant-list-item:hover{
    background-color: #F0F2F5;
    cursor: pointer;
  }
  .nav{
    display: flex;
    .bd_collaps();
    .account{
      .w_h( 35%,300px );
      .bd_collaps();

      padding: 10px;
      border: 1px solid @bd_color;
    }
    .campaign{
      .w_h( 35%,300px );
      .bd_collaps();

      border: 1px solid @bd_color;
    }
    .select{
      .w_h( 30%,300px );
      padding: 10px 20px;
      .bd_collaps();

      border: 1px solid @bd_color;
    }
  }
  .ant-tag{
    margin: 0;
    width: 100%;
  }
</style>